
window.onload=function(){
	// 获取元素
	small =document.getElementById('cover');
	smallbg =document.getElementById('smallbg');
	bigimg= document.getElementById('bigimg');
	big = document.getElementById('big');
		// 计算最大可以移动区域
	owidth = small.offsetWidth -150;
	oheight = small.offsetHeight -150;
	// alert(small.offsetWidth);alert(owidth);
	// 添加事件
	small.onmousemove = function(e){
		//鼠标一如显示事件
		big.style.display = 'block';
		smallbg.style.display = 'block';
		// 获取鼠标位置
		var ev =window.event || e;
		var mouse_left = ev.layerX || ev.offsetX;
		var mouse_top = ev.layerY || ev.offsetY;
		//绑定透明区域鼠标移动
		smallbg_left=(mouse_left -100)+"px";
		smallbg_top=(mouse_top -100)+"px";
		// 赋值
		smallbg.style.left=smallbg_left;
		smallbg.style.top=smallbg_top;
		// 取整方便赋值和判断
		var s_left=parseInt(smallbg.style.left);
		var s_top=parseInt(smallbg.style.top);
		// alert(s_left);alert(s_top);
		// 添加透明区边界域判断
		if(s_left<0){
			smallbg.style.left=0+"px";
		}
		if(s_left>=owidth){
			smallbg.style.left=owidth+"px";
		}
		if(s_top<0){
			smallbg.style.top=0+"px";
		}
		if(s_top>=oheight){
			smallbg.style.top=oheight+"px";
		}
		// 将取整的left top 给bigimg
		bigimg.style.left=s_left* -2 +'px';
		bigimg.style.top=s_top* -2 +'px';
		// alert(bigimg.style.left);
	}
	small.onmouseout = function(e){
		big.style.display = 'none';
		smallbg.style.display = 'none';
	}

}
